<template>
  <view class="battery-list-container">
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar">
        <input 
          class="search-input" 
          placeholder="请输入电池编号" 
          v-model="searchKeyword"
          @confirm="handleSearch"
        />
        <text class="search-icon">🔍</text>
      </view>
    </view>

    <!-- 筛选标签 -->
    <view class="filter-tabs">
      <view 
        class="filter-tab" 
        :class="{active: activeFilter === 'all'}"
        @click="changeFilter('all')"
      >
        所有
      </view>
      <view 
        class="filter-tab" 
        :class="{active: activeFilter === '2'}"
        @click="changeFilter('2')"
      >
        在租
      </view>
      <view 
        class="filter-tab" 
        :class="{active: activeFilter === '1'}"
        @click="changeFilter('1')"
      >
        在柜
      </view>
      <view 
        class="filter-tab" 
        :class="{active: activeFilter === '3'}"
        @click="changeFilter('3')"
      >
        风险
      </view>
      <view 
        class="filter-tab" 
        :class="{active: activeFilter === '4'}"
        @click="changeFilter('4')"
      >
        七天未归还
      </view>
    </view>

    <!-- 电池数量 -->
    <view class="battery-count">
      <text class="count-text">—— 共{{filteredBatteries.length}}组电池 ——</text>
    </view>

    <!-- 电池列表 -->
    <scroll-view class="battery-list" :show-scrollbar="false" scroll-y>
      <view 
        class="battery-item" 
        v-for="battery in filteredBatteries" 
        :key="battery.batterySn"
        @click="goToBatteryDetail(battery)"
      >
        <view class="battery-header">
          <view class="battery-info">
            <text class="battery-status" :class="'status-'+battery.businessStatus">{{businessStatusList[battery.businessStatus]}}</text>
            <text class="battery-code">{{battery.batterySn}}</text>
          </view>
          <view class="battery-percent">
            <text class="percent-value">{{battery.soc}}%</text>
          </view>
        </view>

        <view class="battery-details">
          <view class="detail-row">
            <text class="detail-label">业务状态：</text>
            <text class="detail-value">{{businessStatusList[battery.businessStatus]}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">电池状态：</text>
            <text class="detail-value">{{battery.onlineStatus ? '在线':'离线'}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">电池类型：</text>
            <text class="detail-value">{{battery.batteryTypeName}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">仓门编号：</text>
            <text class="detail-value">{{battery.doorSn}}</text>
          </view>
          <view class="detail-row" v-if="battery.remark">
            <text class="detail-label">备注：</text>
            <text class="detail-value">{{battery.remark}}</text>
          </view>
        </view>

        <view class="battery-actions">
          <view class="action-tabs">
            <text 
              class="action-tab" 
              :class="{active: battery.activeTab === 'rental'}"
              @click.stop="showRentalRecords(battery)"
            >
              租赁记录
            </text>
            <text 
              class="action-tab" 
              :class="{active: battery.activeTab === 'bms'}"
              @click.stop="showBMSInfo(battery)"
            >
              BMS
            </text>
            <text 
              class="action-tab" 
              :class="{active: battery.activeTab === 'detail'}"
              @click.stop="goToBatteryDetail(battery)"
            >
              详情
            </text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredBatteries.length === 0">
        <text class="empty-text">暂无电池数据</text>
      </view>
    </scroll-view>

    <!-- 底部添加按钮 -->
    <view class="add-battery-btn">
      <button class="add-btn" @click="addBattery">添加电池</button>
    </view>
  </view>
</template>

<script>
import api from '@/config/api.js'

export default {
  data() {
    return {
      searchKeyword: '',
      activeFilter: 'all',
      batteries: [],
	  businessStatusList:['未知','在柜' ,'在租']
    }
  },

  computed: {
    filteredBatteries() {
      let filtered = this.batteries

      // 根据筛选条件过滤
      if (this.activeFilter !== 'all') {
        filtered = filtered.filter(battery => battery.businessStatus === this.activeFilter)
      }

      // 根据搜索关键词过滤
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase()
        filtered = filtered.filter(battery => 
          battery.batterySn.toLowerCase().includes(keyword)
        )
      }

      return filtered
    }
  },

  onLoad(options) {
    this.loadBatteryList(options.batterySn)
  },

  onPullDownRefresh() {
    this.loadBatteryList().finally(() => {
      uni.stopPullDownRefresh()
    })
  },

  methods: {
    async loadBatteryList(batterySn) {
      try {
        const result = await api.battery.getBatteryList({
          businessStatus: this.activeFilter === 'all' ? '' : this.activeFilter,
          keywords: this.searchKeyword,
		  batterySn,
		  pageNo:1,
		  pageSize:100
        })
        console.log('result',result)
        if (result) {
          this.batteries = result.map(item => ({
            ...item
          }))
        }
      } catch (error) {
        console.error('获取电池列表失败:', error)
      }
    },

    changeFilter(filter) {
      this.activeFilter = filter
      this.loadBatteryList()
    },

    handleSearch() {
      this.loadBatteryList()
    },

    getStatusClass(status) {
      return {
        'status-inCabinet': status === 'inCabinet',
        'status-rented': status === 'rented',
        'status-risk': status === 'risk',
        'status-notReturned': status === 'notReturned'
      }
    },

    goToBatteryDetail(battery) {
      uni.navigateTo({
        url: `/pages/battery/detail?batterySn=${battery.batterySn}`
      })
    },

    showRentalRecords(battery) {
      // 这里可以加载租赁记录数据
      uni.navigateTo({
        url: `/pages/battery/detail?batterySn=${battery.batterySn}`
      })
    },

    showBMSInfo(battery) {
      // 这里可以加载BMS信息
      uni.navigateTo({
        url: `/pages/battery/detail?batterySn=${battery.batterySn}`
      })
    },

    addBattery() {
		uni.showToast({
		  title: '暂不支持',
		  icon: 'none'
		})
      // uni.navigateTo({
      //   url: '/pages/battery/add'
      // })
    }
  }
}
</script>

<style scoped>
.battery-list-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 搜索栏 */
.search-section {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  height: 70rpx;
  background-color: #f5f5f5;
  border-radius: 35rpx;
  padding: 0 70rpx 0 30rpx;
  font-size: 28rpx;
  color: #333;
}

.search-icon {
  position: absolute;
  right: 30rpx;
  font-size: 32rpx;
  color: #999;
}

/* 筛选标签 */
.filter-tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.filter-tab {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #666;
}

.filter-tab.active {
  color: #007AFF;
  font-weight: bold;
  position: relative;
}

.filter-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #007AFF;
  border-radius: 2rpx;
}

/* 电池数量 */
.battery-count {
  padding: 30rpx;
  text-align: center;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.count-text {
  font-size: 26rpx;
  color: #999;
}

/* 电池列表 */
.battery-list {
  height: calc(100vh - 400rpx);
  padding: 20rpx 30rpx;
  box-sizing: border-box;
}

.battery-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.battery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.battery-info {
  display: flex;
  align-items: center;
}

.battery-status {
  font-size: 24rpx;
  padding: 6rpx 12rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.status-0 {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-1 {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-2 {
  background-color: #fff2e8;
  color: #fa541c;
}

.status-3 {
  background-color: #fff1f0;
  color: #f5222d;
}

.battery-code {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.battery-percent {
  background-color: #f5f5f5;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.percent-value {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.battery-details {
  margin-bottom: 20rpx;
}

.detail-row {
  display: flex;
  margin-bottom: 12rpx;
  font-size: 26rpx;
}

.detail-label {
  color: #999;
  width: 160rpx;
}

.detail-value {
  color: #333;
  flex: 1;
}

.battery-actions {
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
}

.action-tabs {
  display: flex;
  justify-content: space-around;
}

.action-tab {
  font-size: 26rpx;
  color: #666;
  padding: 12rpx 20rpx;
  border-radius: 8rpx;
}

.action-tab.active {
  color: #007AFF;
  background-color: #e6f7ff;
  font-weight: bold;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 添加按钮 */
.add-battery-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
}

.add-btn {
  background-color: #007AFF;
  color: #fff;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  line-height: 80rpx;
}
</style>